<template>
    <div class="pcter-box" style="background-color: rgb(248 248 248); width: 100%;height: 100%;">
        <div class="pcter-front-box">
            <div class="Grey" style="background-color:#ebebeb; border-radius: 0.8rem;">
                <div class="peter-front-box-top">
                    <van-image class="user-img" round
                        src="https://img1.baidu.com/it/u=1043480688,1509867321&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" />
                    <span class="user-name">{{ userName }}</span>
                </div>
                <div class="person-message">
                    <ul>
                        <li>
                            <span class="collect b">6</span>
                            <span class="mini">收藏</span>
                        </li>
                        <li>
                            <span class="attention b">2</span>
                            <span class="mini">我的关注</span>
                        </li>
                        <li>
                            <span class="history b">4</span>
                            <span class="mini">我的足迹</span>
                        </li>
                        <li>
                            <span class="discounts b">5</span>
                            <span class="mini">优惠券</span>
                        </li>
                    </ul>
                </div>
                <div class="two" style="position: absolute; left: 14rem;top: .875rem;">
                    <span class="iconfont" style="font-size: 1.25rem; margin-right: 1.8rem;" @click="show = true">&#xe8b8;</span>
                    <span class="iconfont" style="font-size: 1.25rem;">&#xe63a;</span>
                </div>
            </div>
            <div class="peter-front-box-bottom">
                <div class="card">
                    <div class="peter-front-box-bottom-dingdan" style="font-size: 0.8rem; margin: 0 5px;">
                        <h4>
                            我的订单
                        </h4>
                        <span><a href="">全部订单<van-icon name="arrow" /></a></span>
                    </div>
                        <ul>
                        <li>
                            <van-icon name="pending-payment" class="t" style="margin-top:4px"/>
                            <span class="mini2">待付款</span>
                        </li>
                        <li>
                            <span class="iconfont t">&#xe63f;</span>
                            <span class="mini2">待发货</span>
                        </li>
                        <li>
                           <van-icon name="logistics" class="t"/>
                            <span class="mini2" style="padding-top:6px">待收货</span>
                        </li>
                        <li>
                            <span class="iconfont t">&#xe624;</span>
                            <span class="mini2">退款/售后</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="pcter-Advertising" style="margin-top: 0.625rem;">
            <!-- 这是一个广告位 -->
            <!-- <div @click="demo_moveto"> -->
                <!-- <canvas id="stars"></canvas> -->
                <span>开通VIP，享受商品折扣+好友返利</span>
                <button>立即开通</button>
                <!-- </div> -->
        </div>
        <div class="pcter-main-box">

            <span
                style="font-size: 0.8rem;    font-weight: bold;line-height: 0.875rem;height: 1rem; margin-top: .875rem;margin-bottom: 8px;">我的工具</span>

            <hr>
            <div class="pcter-main-box">
                <ul>
                    <li @click="$router.push('/address')">
                        <span class="iconfont">&#xe712;</span>
                        <span class="mini3">收货地址</span>
                    </li>
                    <li>
                        <span class="iconfont">&#xe623;</span>
                        <span class="mini3">尺码信息</span>
                    </li>
                    <li>
                        <span class="iconfont">&#xe60f;</span>
                        <span class="mini3">意见反馈</span>
                    </li>
                    <li>
                        <span class="iconfont">&#xe62b;</span>
                        <span class="mini3">商家入驻</span>
                    </li>
                    <li>
                        <span class="iconfont">&#xe681;</span>
                        <span class="mini3">绑邀请码</span>
                    </li>
                </ul>
            </div>
        </div>
        <van-action-sheet
            v-model:show="show"
            cancel-text="取消"
            close-on-click-action
             :actions="actions"
        >
            <div class="install" style=" border-bottom:3px solid #F7F8FA" @click="personal">个人信息</div>
            <div class="install"  @click="back()">退出登录</div>`
        </van-action-sheet>
    </div>  
</template>


<script setup lang="ts">
import { ref } from "vue";
import func from "../../../vue-temp/vue-editor-bridge";
import { cartListApi } from "../../apis/cartApi";
import { AUTO_CACHE_KEY, PINIA_CACHE_KEY } from "../../config/common.cfg";
import router from "../../router/index";
import { useCommonStore } from "../../store";
import { showConfirmDialog } from 'vant';

/** 获取个人信息 */
const userName = ref(useCommonStore().userInfo.name)

/** 展示个人信息和退出 */
const show:boolean = ref(false);

/** 退出登录 */
function back(){
    showConfirmDialog({
    title: '是否要退出',
    })
    .then(() => {
        localStorage.removeItem(AUTO_CACHE_KEY)
        sessionStorage.removeItem(PINIA_CACHE_KEY)
        router.push('/login')
    })
}
/** 修改信息 */
function personal(){
    router.push('/information')
}

/**  */
function demo_moveto(){
    router.push('/bagscarts')
}
</script>

<style  scoped lang="less">
@import url('../../../public/fonts/font_nfekawdajcs/iconfont.css');
@import '../../style/common.less';
@font-face {
    font-family: 'iconfont';
    src: url('iconfont.ttf?t=1698044974434') format('truetype');
}

a {
    text-decoration: none;
    color: black;
    font-size: 0.6rem;
}

.app-container {
    background-color: #FBFBFB;
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pcter-box {
    display: block;
    overflow: auto;

    .pcter-front-box {
        .Grey {
            padding-top: 1.65rem;
            padding-bottom: 1.65rem;
        }

        .peter-front-box-top {
            display: flex;
            justify-content: left;
            margin-left: 1.25rem;

            .user-img {
                width: 3.45rem;
                height: 3.45rem;
            }

            .user-name {
                line-height: 3.45rem;
                margin-left: 1.55rem;
            }
        }

        .person-message {
            ul {
                height: 90px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .b{
                    margin-bottom: 5px;
                    color: black;
                    font-weight: bold;
                }
                li {
                    display: flex;
                    flex-direction: column;

                    .mini {
                        font-size: 0.65rem;
                        color: @c3;
                    }

                    span {
                        margin: 0 auto;
                        font-size: 0.9rem;
                    }
                }
            }

        }

        .peter-front-box-bottom {
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .card {
                background-color: #ffffff;
            height: 160px;
                width: 100% - 5px;
                margin-top: -2.25rem;
                border-radius: 0.8rem;
                margin-bottom: -10px;
                padding-bottom: 10px;
            }

            .peter-front-box-bottom-dingdan {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 40px;
                border-bottom: 1px solid @c4;
                span{
                    font-size: 14px;
                    .van-icon{
                        margin-left: 5px;
                    }
                }
            }

            ul {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                height: 120px;
                li {
                    display: flex;
                    flex-direction: column;

                    span {
                        margin: 5px auto;

                    }

                    .mini2 {
                        font-size: 0.6rem;

                    }

                    // .iconfont {
                    //     margin-top: 0.25rem;
                    //     font-size: 1.45rem;
                    // }
                    .t{
                        font-size: 34px;
                    }
                }
            }
        }


    }

    .pcter-Advertising {
        width: 374px;
        height: 3.2rem;
        background-color: #2F2F2F;
        border-radius: 10px;
        margin: 20px auto;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            font-size: 16px;
            color:#D7C1A1
        }
        button{
            color:#D7C1A1;
            font-size: 16px;
           width: 80px;
           height: 32px;
           border-radius: 20px;
           background-color: #67553B;
        }
    }

    .pcter-main-box {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin: 0 15px;
        background-color: #ffffff;
        height: auto;
        padding-bottom: 10px;
        border-radius: 10px;
        padding-left:5px ;
        margin-left: 12px;
        ul {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;

            li {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-right: 0.5rem;
                margin-left: 0.5rem;
                margin-top: 1rem;

                span {
                    display: flex;
                    flex-direction: column;
                    margin-top: 10px;
                }

                .iconfont {
                    margin: 0 auto;
                    font-size: 30px;

                }

                .mini3 {
                    font-size: 0.7rem;
                    color: @c1;
                }
            }
        }
    }
    .install{
        padding: 16px 20px;
        text-align: center;
        font-size: 16px;
    }
  
}
::v-deep .van-action-sheet__content{
        height: 110px;
    }
</style>
